<template>
  <div>
      <h4>发表评论----{{ newsid }}</h4>
      <hr>

      <textarea placeholder='请输入内容(最多120字)' maxlength="120" v-model="msg"></textarea>
      <mt-button type='primary' size='large' @click='postMsg'>发表评论</mt-button>
      
      <!-- 评论列表区 -->
      <div class="cmt-list">
        <div class="cmt-item">
          <div class="cmt-item-title">第1楼&nbsp;用户：匿名用户&nbsp;发表时间：2020-20-20</div>
          <div class="cmt-item-body">好好学习，天天向上！</div>
        </div>
      </div>

      <div class="cmt-list">
        <div class="cmt-item" v-for='(item,i) in cmtilist' :key='i'>
          <div class="cmt-item-title">第{{ i+1 }}楼&nbsp;用户：{{ item.user_name }}&nbsp;发表时间：{{ item.add_time |dataFormat }}</div>
          <div class="cmt-item-body">好好学习，天天向上！</div>
        </div>
      </div>
      
      <mt-button type='danger' size='large' plain @click='loadMore'>加载更多</mt-button>
  
  </div>
</template>

<script>
// 按需从 mint-ui中导出
import { Toast } from 'mint-ui'

export default {
  data(){
    return {
      page: 1, // 默认展示第一页的内容
      cmtilist: [], // 评论数组
      msg:''//即将发表的数据
    }
  },
  methods: {
    async getCommentByPage(){
      // 根据页数来获取评论的数据
      const { data } = await this.$http.get('/api.getcomments/'+ this.newsid +'?pageindex=1')
      if(data.status === 0) {
        return this.cmtilist = this.cmtilist.concat(data.message)
      }
    },
    loadMore(){
      // 点击按钮，加载更多的评论
      // 当触发这个加载更多方法的时候，应该让 page 页码 +1 之后，在调用getCommentByPage方法
      this.page++
      this.getCommentByPage()
    },
    async postMsg(){
      // 点击发表
      // 如果用户没有填写内容，则阻止发表
      if(this.msg.trim().length <= 0) return Toast('请填写评论！')
      // 发表评论的逻辑
      const {data} = await this.$http.post('/api/postcomment', {content: this.msg.trim()})
      if(data.status === 0) {
        // 刷新评论列表
        // 1.再次调用 getCommentByPage
        // this.cmtilist = []
        // this.getCommentByPage()

        // 为了防止重新调用getCommentByPage，清空之前所有评论
        // 在客户端拼接一个评论对象，将它，unshift到cmtlist中
        this.cmtilist.unshift({
          user_name:'123',
          add_time: new Data(),
          content: this.msg.trim()
        })
      }
    }
  },
  props:['newsid'] //接收父组件传递过来的newsid

}
</script>

<style lang="scss" scoped>
  textarea{
    font-size: 14px;
  }

  .cmt-list{
    margin-top: 4px;
    .cmt-item{
       line-height: 30px;
      .cmt-item-title{
        font-size: 14px;
        background-color: #999;
        border-radius: 3px;
      }
      .cmt-item-body{
        font-size: 13px;
        text-indent: 2em;
      }
    }
  }
</style>